<template>
  <el-dialog
    :title="dataForm.id ? '编辑' : '新增'"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="handleColse"
    width="40%"
  >
    <el-form :model="dataForm"
             :rules="dataFormRules"
             ref="dataForm"
             size="small"
             label-width="80px">
      <el-form-item label="模板名称" prop="templateName">
        <el-input v-model="dataForm.templateName" placeholder="模板名称"></el-input>
      </el-form-item>
      <el-form-item label="模板内容" prop="templateHtml">
        <el-row>
          <el-col :span="22">
            <quill-editor :content="dataForm.templateHtml" :isShowToolbar="isShowToolbar" @onEditorChange="onEditorChange"></quill-editor>
          </el-col>
          <el-col :span="2" class="icon-list__tips">
            <el-tooltip placement="top" effect="light" style="padding: 10px;">
              <div slot="content">
                <p>模板格式：</p>
                <p>一、钓鱼网站。</p>
                <p>1.${13333333333.a.b}</p>
                <p>2.${13333333333.b.a}</p></div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="dialogVisible = false"
        size="small">取消</el-button>
      <el-button
        type="primary"
        :loading="dialogLoading"
        @click="handleSubmitForm"
        size="small">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {addTemplate, updateTemplate, getDTemplate} from '@/api/dailyweekly/workflow'
  import QuillEditor from '@/components/QuillEditor'
  export default {
    data() {
      return {
        dialogVisible: false,
        dialogLoading: false,
        dataForm: {
          templateHtml: '',
          id: '',
          templateName: ''
        },
        isShowToolbar: false,
        dataFormRules: {
          templateName: [
            { required: true, message: "模板名称不能为空", trigger: "blur" }
          ],
          templateHtml: [
            { required: true, message: "模板默内容不能为空", trigger: "change" }
          ]
        }
      }
    },
    components: {
      QuillEditor
    },
    methods: {
      init (val) {
        this.dataForm.id = val
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.queryDaily()
          }
        })
      },
      // 新增
      async addTemplate () {
        const data = await addTemplate(this.dataForm)
        if (data) {
          if (data.code === 200) {
            this.dialogLoading = false
            this.dialogVisible = false
            this.$emit('refreshDataList')
          } else {
            this.dialogLoading = false
          }
        }
      },
      // 修改
      async updateTemplate () {
        const data = await updateTemplate(this.dataForm)
        if (data) {
          if (data.code === 200) {
            this.dialogLoading = false
            this.dialogVisible = false
            this.$emit('refreshDataList')
          } else {
            this.dialogLoading = false
          }
        }
      },
      async queryDaily () {
        const data = await getDTemplate(this.dataForm.id)
        if (data) {
          if (data.code === 200) {
            this.dataForm = data.data
          }
        }
        this.dialogLoading = false
      },
      handleSubmitForm () {
        this.$refs['dataForm'].validate(vaild => {
          if (vaild) {
            this.dialogLoading = true
            if (!this.dataForm.id) {
              this.addTemplate()
            } else {
              this.updateTemplate()
            }
          }
        })
      },
      onEditorChange (val) {
        this.dataForm.templateHtml = val.html
      },
      handleColse () {
        this.dialogVisible = false
      }
    }
  }
</script>
<style scoped>
</style>
